<template>
  <div class="page_set">
    <!-- 法币设置 -->
    <div class="content_leset">
      <div class="leset_head">
        <section class="g-full-header">
          <div class="g-full-in flex-between-center overflow-hide">
            <div class="flex-y-center mobile-header">
              <div class="spe-color base-info">
                <div class="flex-y-center indent">
                  <span class="spe-color font24">币币交易订单</span>
                  <i class="merchant-level merchant-level0"></i>
                </div>
              </div>
            </div>
            <p class="spilte-in"></p>
          </div>
        </section>
      </div>
      <!-- cont -->
      <div class="container myinvite">
        <!-- 内容部分 -->
          <div class="alltrad_box m-top-10">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="当前委托" name="0">
                <div class="table-wrap">
                  <el-table
                    max-height='600'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop='autoid' label='订单ID' width='80'></el-table-column>
                    <el-table-column prop='wdate' :label='$t("time")||"时间"'  width='190'></el-table-column>
                    <el-table-column prop='tradcoin' :label='$t("currencyType")||"币种"'>
                      <template slot-scope="scope" >
                       <span > {{scope.row.tradcoin}} / {{scope.row.maincoin}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column width='120' label='类型' >
                      <template slot-scope="scope" >
                       <span 
                        :class="scope.row.type=='buy'?'color-success':'color-danger'"
                        v-text="scope.row.type=='buy'?$t('buy'):$t('sell')">
                      </span>
                      </template>
                    </el-table-column>
                    <el-table-column prop='cny' :label='($t("unitPrice")||"单价")+"（CNY）"'></el-table-column>
                    <el-table-column prop='style' label='方式'>
                      <template slot-scope="scope" >
                        <p v-text="scope.row.style=='limit'?'限价':'市价'"  :class="scope.row.style=='limit'?'color-red':'font-blue'"></p>
                      </template>
                    </el-table-column>
                    <el-table-column prop='number' :label='$t("amount")||"数量"'></el-table-column>
                    <el-table-column prop='unfilled' label='未成交数量'></el-table-column>
                    <el-table-column width='200' :label='$t("status")||"状态"' prop='state' >
                      <template slot-scope="scope">
                          <span v-if="scope.row.state=='unfilled'">未成交</span>
                          <span v-if="scope.row.state=='section'">部分成交</span>
                          <span v-if="scope.row.state=='all'">全部成交</span>
                          <span v-if="scope.row.state=='cancel'">已撤销</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button  size="mini"  type="danger"   @click="close_entrust(scope.row)" >撤单</el-button>
                        <!-- <el-button  size="mini"  type="danger"  @click="goTrade('/FrTrade/order_info',scope.$index, scope.row)">详情</el-button> -->
                      </template>
                    </el-table-column> 
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="历史委托" name="1">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop="wdate" label="时间" width="150"></el-table-column>
                    <el-table-column prop='tradcoin' :label='$t("currencyType")||"币种"'>
                      <template slot-scope="scope" >
                       <span > {{scope.row.tradcoin}} / {{scope.row.maincoin}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="cny" label="人民币单价" width="120"></el-table-column>
                    <el-table-column prop="price" label="委托单价" ></el-table-column>
                    <el-table-column prop="address" label="方式" width="">
                      <template slot-scope="scope">
                          <p v-text="scope.row.style=='limit'?'限价':'市价'"  :class="scope.row.style=='limit'?'color-red':'font-blue'"></p>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="zip" :label='priceLabel' width="120"></el-table-column> -->
                    <el-table-column prop="number" label='数量' ></el-table-column>
                    <el-table-column prop="unfilled" label="未成交数量" ></el-table-column>
                    <el-table-column prop="type" label="类型" width="120">
                      <template slot-scope="scope">
                          <p 
                          v-text="scope.row.type=='buy'?'买入':'卖出'"
                          :class="scope.row.type=='buy'?'color-buy':'color-sell'"></p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="">
                      <template slot-scope="scope">
                          <p v-if="scope.row.state=='unfilled'">未成交</p>
                          <p v-if="scope.row.state=='section'">部分成交</p>
                          <p v-if="scope.row.state=='all'">全部成交</p>
                          <p v-if="scope.row.state=='cancel'">已撤销</p>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
              <el-tab-pane label="成交明细" name="2">
                <div class="table-wrap">
                  <el-table
                    max-height='500'
                    v-loading='showLoading'
                    :header-cell-style="{'background-color':'#ffffff','color':'#777777','font-weight':'bold'}"
                    :data='tableData'>
                    <el-table-column prop="wdate" label="时间" width="150"></el-table-column>
                    <el-table-column prop='tradcoin' :label='$t("currencyType")||"币种"'>
                      <template slot-scope="scope" >
                       <span > {{scope.row.tradcoin}} / {{scope.row.maincoin}}</span>
                      </template>
                    </el-table-column>
                    <el-table-column prop="cny" label="人民币单价" width="120"></el-table-column>
                    <el-table-column prop="price" label="委托单价" ></el-table-column>
                    <el-table-column prop="address" label="方式" width="">
                      <template slot-scope="scope">
                          <p v-text="scope.row.style=='limit'?'限价':'市价'"  :class="scope.row.style=='limit'?'color-red':'font-blue'"></p>
                      </template>
                    </el-table-column>
                    <!-- <el-table-column prop="zip" :label='priceLabel' width="120"></el-table-column> -->
                    <el-table-column prop="number" label='数量' ></el-table-column>
                    <el-table-column prop="unfilled" label="未成交数量" ></el-table-column>
                    <el-table-column prop="type" label="类型" width="120">
                      <template slot-scope="scope">
                          <p 
                          v-text="scope.row.type=='buy'?'买入':'卖出'"
                          :class="scope.row.type=='buy'?'color-buy':'color-sell'"></p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="state" label="状态" width="">
                      <template slot-scope="scope">
                          <p v-if="scope.row.state=='unfilled'">未成交</p>
                          <p v-if="scope.row.state=='section'">部分成交</p>
                          <p v-if="scope.row.state=='all'">全部成交</p>
                          <p v-if="scope.row.state=='cancel'">已撤销</p>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <!--  -->
      </div>
    </div>
  </div>
</template>
<script>
import { checkTradePassword } from "../../service/TradeService.js";
import axios from "axios";
export default {
  data() {
    return {
      userData: this.userModel,
      showDialog: false,
      currencyList: [],
      coinInfo: "",
      buyForm: {
        number: "",
        total: ""
      },
      sellForm: {
        number: "",
        total: ""
      },
      showLoading: false,
      canTrade: false,
      bindState: null,
      myOrderList: [],
      allOrderList: [],
      bankInfo: "",
      orderStatus: 0,
      myBalance: 0,

      //随机生成的备注字符串
      noteStr: "",
      tableDataTwo:[],
      
      tableData: [],
      value5: ['测试',],
      options:[],
      questc2corderProp:false,
      seeInfoProp:false, 
      SeerowData:{} ,
      activeName: '0',
      state:'sending',
      dialogId: null,
      parautoid:'',
      imgUrl:'',
      parinfo:'',
      pageData:{
          // 分页 pagenumber 总页数  pagesize每页条数   pagecode页码 
          coin: '',
          state:'',
          page:1,
          limit:30,
        },
    };
  },
  computed: {
    buyingLabel() {
      return `${this.$t("buy") || "买入"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    sellingLabel() {
      return `${this.$t("sell") || "卖出"}&nbsp;${this.coinInfo.coinid || ""}`;
    },
    buyState() {
      return `${this.$t("buy") || "买入"}`;
    },
    minNum() {
      return `${this.$t("minNum") || "最少"} ${this.coinInfo.minnum * 1}`;
    },
    sellState() {
      return `${this.$t("sell") || "卖出"}`;
    },
    buyTotal() {
      return this.buyForm.number * this.coinInfo.buycny;
    },
    sellTotal() {
      return this.sellForm.number * this.coinInfo.sellcny;
    }
  },
  mounted() {
    if (!this.userData.isLogin) {
        // this.errMsg("label120" || "请登录后操作");
        return false;
    }else{
        this.trad_entrust();//当前委托
        // this.state='sending';//已经匹配的 进行中
        // this.getmyc2ctradorder();
    }    
    
  },
  methods: {
    handleClick(tab, event) {
      // getmyc2ctradorder    已经匹配0 已完成  2   已取消3   已申诉 5      未匹配 查看我的挂单（未交易）
      //选项卡数据切换
        console.log(tab, event);
        console.log(event.target.getAttribute('id'))  //获取到当前元素的id
        const id=event.target.getAttribute('id');
        // this.state=event.target.getAttribute('id');
      if(id=='tab-0'){
        this.tableData=[];
        this.pageData.state='';//已经匹配的 进行中
        // this.getmyc2ctradorder();
        this.trad_entrust();//进行中的
      } else if(id=='tab-1'){
        this.tableData=[];
        this.pageData.state='success';//0:已完成
        this.trad_history();
      }else if(id=='tab-2'){
        this.tableData=[];
        this.pageData.state='cancel';
        this.trad_order();//已取消：cancel
      }
    },
    handleEdit(index, row) {
        console.log(index, row);
    },
    handleDelete(index, row) {
        console.log(index, row);
    },
    // 生成随机备注信息
    getNote() {
      let str = "";
      for (let i = 0; i < 6; i++) {
        str += this.Util.randomNum(0, 9);
      }
      this.noteStr = str;
    },
    // 撤单
    close_entrust(row){
      this.autoid=row.autoid;
      this.$confirm('此操作将撤销该笔委托, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.request(this.api.close_entrust,{id:this.autoid}).then(res => {
          if(res.code==0){
            this.successMsg(res.msg);
            return this.trad_entrust();//更新委托列表
          }else{
                this.errMsg(res.msg);
          }
        });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消撤销'
          });          
      });
    } ,
    // 查看已完成或者已取消的承兑交易订单
    c2c_order(){
      this.request(this.api.c2c_order,this.pageData).then(res => {
        // console.log(`OTC订单${JSON.stringify(res)}`);
        this.showLoading = true;
        if (res.code == "0" && res.data ) {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
          // this.myOrderList = this.getMyOrderlist(
          //   list,
          //   this.coinInfo.coinid || list[0].coinid
          // );
        }
      });
    },
    getMyOrderlist(listArr, coinid) {
      let arr = [];
      if (listArr && this.Util.dataType(listArr) == "array") {
        listArr.map(item => {
          if (item.coinid == coinid) {
            arr.push(item);
          }
        });
        return arr;
      }
    },
    onListClick(data) {
      this.coinInfo = data;
      this.myOrderList = this.getMyOrderlist(this.allOrderList, data.coinid);
      this.getAvailable(data.coinid);
      this.buyForm = {
        number: "",
        total: ""
      };
      this.sellForm = {
        number: "",
        total: ""
      };
    },
    dialogClose() {
      this.showDialog = false;
    },
    // 待付款按钮点击
    SeepayInfo(index, row) {
        console.log(index, row);
        this.seebuyProp=true;
        this.SeerowData=row;
        console.log(row.orderid);    
    },
    // 撤销订单
    updatec2ctrad(index,row){
        console.log(index, row);
        this.seebuyProp=true;
        this.SeerowData=row;
        console.log(row.orderid);   
    },
    SeeRowinfo(index,row){
        console.log(index, row);
        this.seeInfoProp=true;
        this.SeerowData=row;
        console.log(row.orderid);   
    },
    //上传图片
    //上传凭证
    onChange(e) {
      e.preventDefault();
      let file = e.target.files[0];
      let { name, size, type } = file;
      let formData = new FormData();
      let options = {
        headers: {
          "Content-Type": "MultipartFile/form-data"
        },
        method: "post"
      };
      if (!/\.(jpg|png)$/.test(name)) {
        this.$message.error("图片格式需为jpg或者png");
        return;
      }
      if (size > 4 * Math.pow(1024)) {
        this.$message.error(
          `图片大小不可超过4M,当前图片大小${size / Math.pow(1024, 2)}M`
        );
        return;
      }
      formData.append("imgurl", file);
      options.url = `${this.api.baseURL}/user/img`;
      options.data = formData;
      axios(options).then(res => {
        if (res.code == "0") {
          this.successMsg(res.msg || "上传成功");
          this.imgUrl = res.data[0].url;
        }
      });
    },
    // 撤单
    clearOrderBtn(index, row) {
        console.log(index, row);
        const autoid =row.autoid;
        this.$confirm('此操作将撤销该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.updatec2ctrad,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//0:未匹配
                this.getmyc2cmarketorder();
              }else{
                this.$message.error(res.msg);
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // 打款
    sendmoneyok(){
      const autoid =this.SeerowData.autoid;
        this.$confirm('给上述账号转账后点击【确定】按钮, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.sendmoneyok,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                this.seeInfoProp=false;
              }else{
                this.$message.error(res.msg);
                this.seeInfoProp=false;
              }
              
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // 收款
    getmoneyok(){
      const autoid =this.SeerowData.autoid;
        this.$confirm('点击收款后该笔订单完成, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          return this.request(this.api.getmoneyok,{autoid:autoid,}).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                this.seeInfoProp=false;
              }else{
                this.$message.error(res.msg);
                this.seeInfoProp=false;
              }
            }
          );
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });   
    },
    // questc2corder 投诉、申诉订单
    questc2corder(index, row){
      const autoid =row.autoid;
        this.$confirm('确定投诉该笔订单, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.questc2corderProp=true;
          this.SeerowData = row;
          this.parautoid=autoid;
          return
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });          
        });  
    },
    complaintBtn(){
      let parmData={
        autoid:this.parautoid,
        photo:this.imgUrl,
        info:this.parinfo,
      }
      if(parmData.info==''){
        this.$message.error('请填写申诉原因');
        return
      }
      if(parmData.photo==''){
        this.$message.error('请上传图片凭证');
        return
      }
      return this.request(this.api.questc2corder,parmData).then(
            res => {
              if(res.code==0){
                this.$message({
                  message: res.msg,
                  type: 'success'
                });
                this.tableData=[];
                this.state=1;//1:匹配的
                this.getmyc2cmarketorder();
                this.questc2corderProp=false;
              }else{
                this.$message.error(res.msg);
                this.questc2corderProp=false;
              }
            }
      );
    },
    //跳转
    goTrade(api, index, row) {
      console.log(row);
      const maincoinid= row.autoid;
      const link ='/FrTrade/order_info?autoinid='+maincoinid+''
      console.log(link);
      this.navigateTo(link);
      // this.navigateTo(api, {
      //   maincoinid: data.maincoinid,
      //   coinid: data.coinid
      // });
    },
    //00 查看币币交易当前委托
    trad_entrust() {
      this.pageData.state='';
      this.request(this.api.trad_entrust,this.pageData).then(res => {
        this.showLoading = true;
        if (res.code == "0" && res.data) {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
        }
      });
    },
    // 01 trad_history  历史委托
    trad_history() {
      this.pageData.state='';
      this.request(this.api.trad_history,this.pageData).then(res => {
        this.showLoading = true;
        if (res.code == "0" && res.data) {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
        }
      });
    },
    //  02 trad_order 币币交易成交明细
    trad_order() {
      this.pageData.state='';
      this.request(this.api.trad_order,this.pageData).then(res => {
        this.showLoading = true;
        if (res.code == "0" && res.data!='') {
          this.showLoading = false;
          this.tableData=res.data;
          let list = res.data.slice(0);
          this.allOrderList = list;
        }else{
          this.showLoading = false;
          return
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.content_leset {
  .container {
    margin: 0 auto;
    width: calc(100% - 678px);
  }
  .myinvite{
    min-height: 800px;
  }
  .g-full-header {
    width: 100%;
    background-color: #1b2945;
    padding: 46px 0;
    border-top: 1px solid #171c2c;
  }
  .g-full-in {
    width: calc(100% - 678px);
    margin: 0 auto;
    .base-info {
      margin-left: 24px;
      .over-info {
        max-width: 720px;
        white-space: normal;
        word-break: break-all;
      }
    }
    .spe-color {
      color: #d2d6ec;
      line-height: normal;
    }
    .mobile-name {
      display: none;
    }
  }

  .avatar-container.zero {
    background: #5d8cc2;
  }
  .avatar-container.bigger {
    height: 56px;
    width: 56px;
    .name {
      font-size: 24px;
      color: #fff;
      font-style: normal;
    }
  }
  .avatar-container {
    height: 32px;
    width: 32px;
    justify-content: center;
    display: flex;
    align-items: center;
    border-radius: 50%;
    position: relative;
  }
}

//
.flex-between,
.flex-between-center {
  display: flex;
  justify-content: space-between;
}
.flex-between-center,
.flex-start-center {
  align-items: center;
}
.flex-center,
.flex-y-center {
  display: flex;
  align-items: center;
}
.flex-auto {
    flex: 1 1 auto;
}
.font24 {
  font-size: 24px;
}
.g-full-in .line:after {
  content: " / ";
  display: inline-block;
  margin: 0 32px;
}
.font12 {
  font-size: 12px;
}
.cursor {
  cursor: pointer;
}
.g-full-in {
  .buy {
    color: #0da88b;
  }
  .sell {
    color: #ef5656;
  }
  .indent {
    margin-bottom: 8px;
  }
}
.font-gray {
    color: #9aa5b5;
}
.font-black {
    color: #495666;
}
//
.page_set{
  .g-user {
    width: 1200px;
    margin: 0 auto;
    .font5 {
      font-weight: 400;
    }
    .add-list {
        height: 78px;
        line-height: 78px;
        position: relative;
        span {
          margin-left: 8px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
    }
    .add-list:before {
        content: "";
        display: block;
        border-top: 1px solid #e6ecf2;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        margin-left: 80px;
    }
  }
  .g-user-layout {
    border: 1px solid #e6ecf2;
    border-radius: 2px;
    margin-top: 24px;
  }
  .g-user-title {
    background-color: #f2f6fa;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    border-bottom: 1px solid #e6ecf2;
    span[data-weight="1"] {
      color: #1c242c;
      font-weight: 400;
    }
    span[data-type="1"] {
        margin-left: 24px;
    }
  }
  .g-user-col {
    padding: 0 24px;
    overflow: hidden;
    .bot_line{
      border-bottom: 1px solid #e6ecf2;
    }
    .spe-radio-message{margin-left: 100px;}
  }
  .empty{min-height: 150px;}
  .g-user-list {
    min-height: 78px;
    position: relative;
    .m-layout-inner {
          max-width: 950px;
          display: flex;
          align-items: flex-start;
          word-break: break-all;
    }
    .left-in{
      .real-name {
        flex-shrink: 0;
        width: 96px;
        margin: 0 16px 0 24px;
      }
      .bank-info {
        max-width: 854px;
      }
    }
    // &:after {
    //     content: "";
    //     display: block;
    //     width: 100%;
    //     border-bottom: 1px solid #e6ecf2;
    //     position: absolute;
    //     bottom: 0;
    //     left: 0;
    //     margin-left: 80px;
    // }  
  }

}


</style>
